<template>
    <div class="PrivincialLoginBox">
        <div class="PrivincialLoginCenterBox">
            <div class="centerLeft">
                <!--        <img src="../assets/title.png"/>-->
            </div>
            <div class="centerRight">
                <div class="rightContent" v-on:keydown.enter="submitLogin">
                    <Card>
                        <div class="top">
                            <p>河南省高校毕业生</p>
                            <p>毕业去向登记平台</p>
                        </div>
                        <Tabs value="school" :animated="false">
                            <TabPane label="" name="school">
                                <!--                <h1>欢迎登录！</h1>-->
                                <Form ref="provincialForm" :model="provincialForm" :rules="provincialrules" class="loginFormBox">
                                    <FormItem prop="username">
                                        <Input v-model="provincialForm.username" size="large" clearable placeholder="请输入您的账号" autocomplete="off">
                                            <template #prefix>
                                                <img src="@/assets/username.png" style="width: 22px; height: 22px" />
                                            </template>
                                        </Input>
                                    </FormItem>
                                    <FormItem prop="password">
                                        <Input type="password" v-model="provincialForm.password" size="large" password placeholder="请输入密码" autocomplete="off">
                                            <template #prefix>
                                                <img src="@/assets/password.png" style="width: 22px; height: 22px" />
                                            </template>
                                        </Input>
                                    </FormItem>

                                    <FormItem>
                                        <Button :loading="loading" @click.native="submitLogin" long>登录</Button>
                                        <div class="last">
                                            <!--                      <p @click="">忘记密码</p>-->
                                            <!-- <p @click="goReset">申请找回密码</p> -->
                                        </div>
                                    </FormItem>
                                </Form>
                            </TabPane>
                        </Tabs>
                    </Card>
                </div>
            </div>
        </div>
        <Modal v-model="showModal" title="信息补充">
            <Form ref="schoolLoginFormModal" :model="formSchoolModal" :rules="rulesSchoolModal" class="loginFormBox" :label-width="100">
                <FormItem prop="password" label="原始密码">
                    <Input type="password" v-model="formSchoolModal.password" size="large" password placeholder="请输入密码" autocomplete="off">
                        <template #prefix>
                            <img src="@/assets/password.png" style="width: 22px; height: 22px" />
                        </template>
                    </Input>
                </FormItem>
                <FormItem label="新密码" prop="newPass">
                    <SetPassword size="large" v-model="formSchoolModal.newPass" @on-change="ModalchangeInputPass" />
                    <!--                  <Input v-model="formPwd.pwd"-->
                    <!--                         size="large"-->
                    <!--                         clearable-->
                    <!--                         placeholder="请输入新密码"-->
                    <!--                         autocomplete="off"/>-->
                </FormItem>
                <FormItem label="确认密码" prop="copypwd">
                    <SetPassword size="large" v-model="formSchoolModal.copypwd" />
                </FormItem>
                <FormItem label="手机号" prop="mobile" :error="errorMobile">
                    <Input v-model="formSchoolModal.mobile" size="large" clearable placeholder="请输入手机号" autocomplete="off">
                        <template #prefix>
                            <Icon type="md-phone-portrait" style="color: rgb(136, 199, 250)" />
                        </template>
                    </Input>
                </FormItem>
                <Row>
                    <FormItem label="验证码" prop="code">
                        <Row style="display: flex">
                            <Input style="width: 70%" v-model="formSchoolModal.code" size="large" clearable placeholder="请输入短信验证码" :maxlength="10" class="input-verify">
                                <template #prefix>
                                    <img src="@/assets/yzm.png" style="width: 22px; height: 22px" />
                                </template>
                            </Input>
                            <CountDownButton ref="countDown" @on-click="showVaptcha" :autoCountDown="false" size="large" :loading="sending" :text="getSms" />
<!--                            <slidingVerification ref="slidingv" @onOk="onOkModal" :modalShow="true" />-->
                            <Captcha  v-if="showCaptcha" @onSuccess="onOkModal" ref="captcha" ></Captcha>

                        </Row>
                    </FormItem>
                    <!--          <FormItem>-->

                    <!--          </FormItem>-->
                </Row>
            </Form>
            <div style="display: flex; justify-content: center">
                <Button :loading="loading" @click.native="submitModal" type="primary">提交</Button>
            </div>
            <div></div>
            <div slot="close"></div>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>
<script>
import { login, userInfoToken, modifyPassFirstLogin, sendUpdatePassCode } from '@/api/index';
import util from '@/libs/util';
import SetPassword from '@/views/my-components/xboot/set-password.vue';
import CountDownButton from '@/views/my-components/xboot/count-down-button.vue';
import slidingVerification from '@/views/my-components/xboot/sliding-verification.vue';
import { validateMobile, validatePassword } from '@/libs/validate';
import CryptoJS from 'crypto-js';
// import Cookies from "_js-cookie@2.2.1@js-cookie";
import Captcha from "@/components/captcha.vue";
export default {
    components: { slidingVerification, CountDownButton, SetPassword ,Captcha},
    data() {
        return {
            showCaptcha:false,
            loading: false,

            provincialForm: {
                username: '',
                password: ''
            },

            provincialrules: {
                username: [
                    {
                        required: true,
                        message: '账号不能为空',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '密码不能为空',
                        trigger: 'blur'
                    }
                ]
            },
            // 弹框
            formSchoolModal: {
                password: '',
                newPass: '',
                mobile: '',
                code: '',
                copypwd: '',
                passStrength: ''
            },
            rulesSchoolModal: {
                password: [
                    {
                        required: true,
                        message: '请输入原密码',
                        trigger: 'blur'
                    }
                ],
                newPass: [
                    {
                        required: true,
                        message: '请输入新密码',
                        trigger: 'blur'
                    },
                    {
                        validator: validatePassword,
                        trigger: 'blur'
                    }
                ],
                copypwd: [
                    {
                        required: true,
                        message: '请确认新密码',
                        trigger: 'blur'
                    },
                    {
                        validator: validatePassword,
                        trigger: 'blur'
                    }
                ],
                mobile: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    },
                    {
                        validator: validateMobile,
                        trigger: 'change'
                    }
                ],
                code: [
                    {
                        required: true,
                        message: '验证码不能为空',
                        trigger: 'blur'
                    }
                ]
            },
            showModal: false,
            // 错误提示
            errorMobile: '',
            resource: '1',
            getSms: '获取验证码',
            sending: false
        };
    },
    methods: {
        //登录提交
        submitLogin() {
            this.$refs.provincialForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.provincialForm.resource = '1';
                    // 将密钥转换为WordArray对象
                    const keyWordArray = CryptoJS.enc.Utf8.parse('d77f1e8084e21d96');
                    // 加密
                    const encrypted = CryptoJS.AES.encrypt(this.provincialForm.password, keyWordArray, {
                        mode: CryptoJS.mode.ECB,
                        padding: CryptoJS.pad.Pkcs7
                    });
                    let form = { ...this.provincialForm };
                    form.password = encrypted.toString();
                    login(form).then(res => {
                        if (res.success) {
                            // this.showModal = true
                            this.loading = false;
                            this.afterLogin(res);
                        } else {
                            this.loading = false;
                        }
                    });
                }
            });
        },
        afterLogin(res) {
            let accessToken = res.result;
            this.token = accessToken;
            // 获取用户信息
            userInfoToken(accessToken).then(res => {
                if (this.resource != '1') {
                    // this.$Message.error('登录入口错误！');
                    this.$Message.error({
                        content: '登录入口错误！',
                        duration: 5,
                        closable: true
                    });
                } else {
                    if (res.success) {
                        if (res.result.firstLogin && (this.resource == '2' || this.resource == '1' || this.resource == '3')) {
                            //首次登录
                            this.showModal = true;
                            this.loading = false;
                        } else {
                            //非首次登录
                            console.log('false');
                            // window.location.reload();
                            // 避免超过大小限制
                            this.setStore('accessToken', accessToken);
                            delete res.result.permissions;
                            let roles = [];
                            console.log(res.result, 'res.result');
                            if (res.result.roles) {
                                res.result.roles.forEach(e => {
                                    roles.push(e.name);
                                });
                            }
                            delete res.result.roles;
                            this.setStore('roles', roles);
                            this.setStore('saveLogin', this.saveLogin);
                            if (this.saveLogin) {
                                // 保存7天
                                Cookies.set('userInfo', JSON.stringify(res.result), {
                                    expires: 7
                                });
                                Cookies.set('currentUser', this.$route.name, {
                                    expires: 7
                                });
                            } else {
                                Cookies.set('userInfo', JSON.stringify(res.result));
                                Cookies.set('currentUser', this.$route.name);
                            }
                            this.$store.commit('setRoute', this.$route.name);
                            this.setStore('userInfo', res.result);
                            this.$store.commit('setUserInfo', res.result);
                            // 加载菜单
                            console.log(this.saveLogin, 'pro');
                            util.initRouter(this);
                            // window.location.reload()
                            this.$router.push({
                                name: 'home_index'
                            });
                        }
                    }
                }
            });
        },
        //
        onOkModal() {
            this.showCaptcha=false
            this.sending = true;
            let obj = {
                mobile: this.formSchoolModal.mobile
            };
            sendUpdatePassCode(this.token, obj).then(res => {
                if (res.success) {
                    this.getSms = '发送中';
                    this.$Message.success('发送短信验证码成功');
                    // 开始倒计时
                    this.$refs.countDown.startCountDown();
                }
                this.sending = false;
            });
        },
        // 弹框提交
        submitModal() {
            let { newPass, copypwd, mobile, code, passStrength, password } = this.formSchoolModal;
            this.$refs.schoolLoginFormModal.validate(valid => {
                if (valid) {
                    if (newPass === copypwd) {
                        this.loading = true;
                        // 请求接口
                        modifyPassFirstLogin(this.token, {
                            password: password,
                            newPass: newPass,
                            passStrength: passStrength,
                            mobile: mobile,
                            code: code,
                            username: this.provincialForm.username
                        }).then(res => {
                            if (res.success) {
                                console.log(res);
                                this.showModal = false;
                                this.loading = false;
                            } else {
                                this.loading = false;
                            }
                        });
                    } else {
                        // this.$Message.error('两次密码不一致！');
                        this.$Message.error({
                            content: '两次密码不一致！',
                            duration: 5,
                            closable: true
                        });
                    }
                }
            });
        },
        //密码强度
        ModalchangeInputPass(v, grade, strength) {
            this.formSchoolModal.passStrength = strength;
        },
        showVaptcha() {
            this.$refs.provincialForm.validate(valid => {
                if (valid) {
                    let { newPass, copypwd } = this.formSchoolModal;
                    if (newPass === copypwd) {
                        var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                        if (!reg.test(this.formSchoolModal.mobile)) {
                            this.errorMobile = '手机号格式错误';
                            return;
                        } else {
                            this.errorMobile = '';
                            this.sendSmsCode();
                        }
                    } else {
                        // this.$Message.error('两次密码不一致！');
                        this.$Message.error({
                            content: '两次密码不一致！',
                            duration: 5,
                            closable: true
                        });
                    }
                }
            });
            // this.vaptchaObject.validate(); // 若没验证验证码 开始验证
        },
        sendSmsCode() {
            this.showCaptcha=true
            // this.$refs.slidingv.openModal();
        },
        //跳转到忘记密码页面
        goReset() {
            this.$router.push('/proreset');
        }
    }
};
</script>

<style scoped lang="less">
@import './provincialLogin.less';
</style>
